<template>
  <tm-form
    :model-value="formData"
    layout="horizontal"
    :margin="[0]"
    :padding="[0, 0]"
    :border="false"
    :label-align="'left'"
    :transparent="true"
    @submit="handleSubmit"
  >
    <Card title="主体信息" :title-font-size="'36rpx'" :padding="[32]" :show-divider="false">
      <view class="hb-flex hb-flex-col hb-gap-3 hb-mt-6">
        <tm-form-item
          label="证书类型"
          field="organizationCertificateType"
          align="left"
          :margin="[0, 0]"
          :padding="[0]"
          :errorLabel="''"
          :border="true"
          required
          :rules="[
            {
              required: true,
              message: '请选择证书类型',
            },
          ]"
        >
          <TmCell
            :margin="[0, 0]"
            :right-text="
              certificateTypeOptions.find(
                (item) => item.value === formData.organizationCertificateType,
              )?.text || '请选择'
            "
            :padding="[0]"
            @click="showActionMenu = true"
          ></TmCell>
        </tm-form-item>
        <tm-form-item
          required
          label=""
          field="organizationCertificateImage"
          :border="true"
          align="left"
          :margin="[0, 0]"
          :padding="[0]"
          :errorLabel="''"
          :rules="[
            {
              required: true,
              message: '请上传登记证书照片',
            },
          ]"
        >
          <view class="hb-text-sm hb-mb-3">上传登记证书照片</view>
          <view class="hb-flex hb-gap-3">
            <CredentialUpload
              v-model:img="formData.organizationCertificateImage"
              :bg-img-key="'businessLicense'"
            />
          </view>
        </tm-form-item>

        <tm-form-item
          label="组织名称"
          field="organizationName"
          :label-width="200"
          align="left"
          :margin="[0, 0]"
          :padding="[0]"
          :errorLabel="''"
          :border="true"
          required
          :rules="[
            {
              required: true,
              message: '请输入组织名称',
            },
          ]"
        >
          <TmInput
            v-model.trim="formData.organizationName"
            :height="40"
            :font-size="28"
            :input-padding="[16, 16]"
            placeholder="请输入组织名称"
            :transparent="true"
          />
        </tm-form-item>

        <tm-form-item
          label="法人姓名"
          field="organizationLegalPerson"
          align="left"
          :margin="[0, 0]"
          :padding="[0]"
          :errorLabel="''"
          :border="true"
          required
          :rules="[
            {
              required: true,
              message: '请输入法人姓名',
            },
          ]"
        >
          <TmInput
            v-model.trim="formData.organizationLegalPerson"
            :height="40"
            :font-size="28"
            :input-padding="[16, 16]"
            placeholder="请输入法人姓名"
            :transparent="true"
          />
        </tm-form-item>

        <tm-form-item
          label="注册号"
          field="organizationRegistrationNumber"
          :border="true"
          align="left"
          :margin="[0, 0]"
          :padding="[0]"
          :errorLabel="''"
          required
          :rules="[
            {
              required: true,
              message: '请输入注册号',
            },
          ]"
        >
          <TmInput
            v-model.trim="formData.organizationRegistrationNumber"
            :height="40"
            :font-size="28"
            :input-padding="[16, 16]"
            placeholder="请输入社会统一信用代码"
            :transparent="true"
          />
        </tm-form-item>

        <tm-form-item
          label="注册地址"
          field="organizationRegistrationAddress"
          :border="true"
          align="left"
          :margin="[0, 0]"
          :padding="[0]"
          :errorLabel="''"
          required
          :rules="[
            {
              required: true,
              message: '请输入注册地址',
            },
          ]"
        >
          <TmInput
            v-model.trim="formData.organizationRegistrationAddress"
            :height="40"
            :font-size="28"
            :input-padding="[16, 16]"
            placeholder="按身份证地址填写"
            :transparent="true"
          />
        </tm-form-item>

        <tm-form-item
          required
          label="营业期限"
          field="organizationBusinessPeriod"
          :border="true"
          align="left"
          :margin="[0, 0]"
          :padding="[0]"
          :errorLabel="''"
          :rules="[
            {
              required: true,
              message: '请选择营业期限',
            },
          ]"
        >
          <tm-time-picker
            v-model:model-str="formData.organizationBusinessPeriod"
            :defaultValue="formData.organizationBusinessPeriod"
            :showDetail="showDetail"
            :immediate-change="true"
            format="YYYY-MM-DD"
            start="1949/6/15 00:00:00"
            end="2099/12/31 23:59:59"
            :transparent="true"
          >
            <tm-text
              v-if="formData.organizationBusinessPeriod"
              :label="formData.organizationBusinessPeriod"
            ></tm-text>
            <tm-text v-else color="#999996" :label="'请选择登记证书有效期'"></tm-text>
          </tm-time-picker>
        </tm-form-item>
      </view>
      <TmActionMenu
        :list="certificateTypeOptions"
        v-model:model-value="showActionMenu"
        @change="handleSelectCertificateType"
      />
    </Card>
    <BottomSubmit submit-btn-label="提交认证信息" :submitLoading="loading" />
  </tm-form>
</template>

<script lang="ts" setup>
  import { EnterpriseRealNameAuth, OrganizationRealNameAuth } from '@/api/realNameAuth/type';
  import CredentialUpload from './CredentialUpload.vue';
  import { botCertificationCertify } from '@/api/realNameAuth';
  import { AuthTypeEnum, certificateTypeOptions } from '@/enums/LoginEnum';
  import Card from './Card/index.vue';
  import { useUserStore } from '@/store/modules/user';
  const userStore = useUserStore();
  const showDetail = {
    year: true,
    month: true,
    day: true,
    hour: false,
    minute: false,
    second: false,
  };
  const props = defineProps<{
    organizationRealNameAuth: OrganizationRealNameAuth;
  }>();
  const formData = reactive<OrganizationRealNameAuth>({} as OrganizationRealNameAuth);

  watch(
    () => props.organizationRealNameAuth,
    (value) => {
      formData.organizationCertificateType = value?.organizationCertificateType;
      formData.organizationCertificateImage = value?.organizationCertificateImage;
      formData.organizationName = value?.organizationName;
      formData.organizationLegalPerson = value?.organizationLegalPerson;
      formData.organizationRegistrationNumber = value?.organizationRegistrationNumber;
      formData.organizationRegistrationAddress = value?.organizationRegistrationAddress;
      formData.organizationBusinessPeriod = value?.organizationBusinessPeriod;
      formData.certificationType = AuthTypeEnum.ORGANIZATION;
    },
    { deep: true, immediate: true },
  );
  const showActionMenu = ref(false);
  const handleSelectCertificateType = (item: any) => {
    formData.organizationCertificateType = item.value;
  };
  const loading = ref(false);
  // 提交申请
  const handleSubmit = async (e: Tmui.tmFormSubmitResult<typeof formData>) => {
    // 表单验证
    if (!e.isPass) return;
    // 防止重复提交
    if (loading.value) return;
    loading.value = true;
    // 使用表单验证
    try {
      await botCertificationCertify(formData);
      userStore.getUserInfo();
      uni.showToast({
        title: '提交认证信息成功',
        icon: 'success',
      });
      setTimeout(() => {
        redirectTo({
          name: 'realNameAuthResult',
        });
      }, 1000);
    } catch (e) {
      console.error('表单验证失败', e);
    } finally {
      loading.value = false;
    }
  };
</script>

<style lang="scss" scoped></style>
